<template >
    <div class="form">
        <el-form ref="form" :disabled = "disabled" label-position = "left" :model="form" :rules = "rules" :label-width="formSize.label+'px'">
            <el-form-item :label="it.label" v-for="(it,idx) in formData" :key="idx" :prop = "it.prop">
                <el-select @click = "selectCol" v-if="it.type == 'selectCol'"  v-model="form[it.prop]" :placeholder="it.placeholder?it.placeholder:'请选择'">
                    <el-option v-for="(t,i) in select.options1" :key="i" :label="t[it.labelKey]" :value="t[it.valueKey]"></el-option>
                </el-select>
                <el-select v-if="it.type == 'selectCol1'"  v-model="form[it.prop]" :placeholder="it.placeholder?it.placeholder:'请选择'">
                    <el-option v-for="(t,i) in select.options2" :key="i" :label="t[it.labelKey]" :value="t[it.valueKey]"></el-option>
                </el-select>
                <el-input :type = "it.type == 'input'?'text':'textarea'" :show-password = "it.iptType == 'pwd'" v-if="it.type == 'input'||it.type == 'textarea'" v-model="form[it.prop]" :placeholder="it.placeholder?it.placeholder:'请输入'">
                    <template slot="append" v-if="it.prop == 'code'">
                        <el-button @click = "getCode" type="primary" :loading="codeLoading">{{ codeText }}</el-button>
                    </template>
                </el-input>
                <div v-if="it.type == 'div'" >
                    {{ form[it.prop] }}
                </div>
                <el-select v-if="it.type == 'select'||it.type == 'select1'" v-model="form[it.prop]" :placeholder="it.placeholder?it.placeholder:'请选择'">
                    <el-option v-for="(t,i) in it.options" :key="i" :label="t[it.labelKey]" :value="t[it.valueKey]"></el-option>
                </el-select>
                <el-checkbox-group  v-if="it.type == 'checkbox'&&it.options&&it.options.length>0" v-model="form[it.prop]">
                    <el-checkbox v-for="(t,i) in it.options&&it.options.length>0?it.options:[]" :key="i" :label="t[it.valueKey]">{{t[it.labelKey]}}</el-checkbox>
                </el-checkbox-group>
                <!-- <el-checkbox-group v-model="form[it.prop]"  v-if="it.type == 'checkbox'">
                    <el-checkbox label="复选框 A"></el-checkbox>
                    <el-checkbox label="复选框 B"></el-checkbox>
                    <el-checkbox label="复选框 C"></el-checkbox>
                    <el-checkbox label="禁用" disabled></el-checkbox>
                    <el-checkbox label="选中且禁用" disabled></el-checkbox>
                </el-checkbox-group> -->
                <el-radio-group v-if="it.type == 'radio'" v-model="form[it.prop]">
                    <el-radio v-for="(t,i) in it.options" :key="i" :label="t[it.labelKey]">{{ t[it.valueKey] }}</el-radio>
                </el-radio-group>
                <el-date-picker :format = "it.format?it.format:'yyyy-MM-dd HH:mm:ss'" :value-format = "it.format?it.format:'yyyy-MM-dd HH:mm:ss'" v-if="it.type == 'datePicker'" v-model="form[it.prop]" :type="it.date?it.date:'date'" :placeholder="it.placeholder?it.placeholder:'请选择'"
                        style="width: 100%;"></el-date-picker>
                <el-time-picker v-if="it.type == 'timePicker'" v-model="form[it.prop]" :placeholder="it.placeholder?it.placeholder:'请选择'" style="width: 100%;"></el-time-picker>
                <el-switch v-if="it.type == 'switch'" v-model="form[it.prop]"></el-switch>
				<el-cascader v-if="it.type == 'cascader'" style="width:100%" clearable v-model="form[it.prop]" :options="it.options"></el-cascader>
                <el-upload
                v-if="it.type == 'upload'&&image==''"
                class="upload-demo"
                drag
                :show-file-list = "false"
                :action="$url+'/upload/upload'"
                multiple :on-change = "(file,fileList)=>it.change(file,fileList,it)">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
                <img style="width: 100%;" v-if="it.type == 'upload'&&image!=''" :src="image" alt="">
                <!-- <el-button v-if="it.type == 'btn'" type="primary" @click="onSubmit">立即创建</el-button> -->
				<WangEditor v-if="it.type == 'WangEditor'&&!disabled"  :isClear="isClear" :wangEditorContent.sync="form[it.prop]" style="margin-top: 20px;"></WangEditor>
                <div v-if="it.type == 'WangEditor'&&disabled" v-html="form[it.prop]" style="width: 100%;">

                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
import options from "../../../assets/js/city-data-level1";
import WangEditor from "@/components/WangEditor";
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则
let validatorPhone = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入手机号'))
    } else if (!reg_tel.test(value)) {
        callback(new Error('手机号格式错误'))
    } else {
        callback()
    }
}
export default {
    name: "tem",
    mixins: [pagePublic],
    components: {WangEditor},
    props: {
        
        // form: {
        //     type: Object,
        //     return: () => { }
        // },
        // formData: {
        //     type: Array,
        //     return: () => []
        // },
        // formSize:{
        //     type: Object,
        //     return: () => {
        //         label:'80'
        //     }
        // },
        // rules:{
        //     type: Object,
        //     return: () => {
        //         return {}
        //     }
        // }
    },
    data() {
        
        return {
            isClear:false,
            image:'',
            $url:this.$url,
            disabled:true,
            codeLoading:false,
            codeText:'获取验证码',
            interval:'',
            form:{},
            formData:[],
            formSize:{
                label:'150'
            },
            select:{
                options1:[],
                options2:[],
                options3:[],

            },
            level:0,
            projectid:'',//课程分类id
            projectid0:'',//课程分类子级id
            projectid1:'',//课程分类子级id
            defaultData:[],
            rules:{},
            // urls:{
            //     list: {
            //         url:this.$api.tem.list,
            //         method:"get",
            //         sync:false,
            //     },
            //     add:this.$api.tem.add,
            //     edit:this.$api.tem.edit,
            //     del:this.$api.tem.del
            // },


        }
    },
    computed: {
        ...mapState(['configInfo']),

    },
    created() {
        console.log(this.formData,this.form,this.rules,66666666)
    },
    methods: {
        ...mapMutations(['set_configInfo']),
        reset(){
            this.$refs['form'].resetFields()
        },
        submitForm() {
            this.$refs['form'].validate((valid) => {
            if (valid) {
                this.$emit('submit', this.form);
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        setValue(form,formData,rules,disabled,key){
            this.$nextTick(()=>{
                this.form = form
                this.formData = JSON.parse(formData);
                console.log(this.formData,'qxxxxxxxxxxxx)');
                this.rules = rules
                console.log(this.formData,disabled,this.form,this.rules,3333333)
                this.disabled = disabled == 'details'?true:false;
                if(key&&key=='onLineAnswer'){
                    this.getXmlistChild(0)
                }
            })
            
            
        },
        setImageUrl(e){
            this.$nextTick(()=>{
                this.image = e
                console.log(this.image,'this.image1111')

            })
        },
        getCode(){
            let reg = /^1[3456789]\d{9}$/
            if(!reg.test(this.form.mobile)){
                return this.$refs.form.validateField('mobile');
            }else{
                this.$api.sendSms({mobile:this.form.mobile}).then((res)=>{
                    if(res.status == 200){
                        this.$message({
                            message: res.msg,
                            type:'success'
                        })
                        this.form.key = res.key
                        this.codeLoading = true
                        let time = 60
                        this.codeText = `${time}s后获取`
                        this.interval = setInterval(() => 
                            {
                                time--;
                                if(time == 0){
                                    this.codeLoading = false
                                    this.codeText = '获取验证码'
                                    clearInterval(this.interval);
                                }else{
                                    this.codeText = `${time}s后获取`
                                }
                            }
                        ,1000)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })
                
            }
            
        },
        selectCol(e){
            console.log(e,2222222)
            this.projectid = e
            this.select.options2 = []
            if(e){
                this.getmysubject()
            }
        },
        // 获取课程分类
        getXmlistChild(pid){
            this.$api.third().then(res=>{
                this.select.options1 = res.data || []
                if(res.data&&res.data.length>0){
                    this.projectid = res.data[0].config_id;
                    this.getmysubject();
                }
            })
        },
        getmysubject(){
            this.$api.mysubject({project:this.projectid}).then(res=>{
                this.select.options2 = res.data || []
            })
        },
        clearEditor(){
            this.$nextTick(()=>{
                this.isClear = true

            })
        }
    }
}
</script>
<style lang="scss" scoped>
.form {
    width: 100%;
    height: 100%;
}
</style>